<template>
    <div>
        <div class="wrapper">
            <!--背景图片-->
            <div id="web_bg" class="background"></div>
            <!--其他代码 ... -->
        </div>
        <div class="box2">
            <h1>用户注册</h1>
            <form onsubmit="message()">
                <div class="form2">手机号码：<input name="account" id="account" type="text" @focus="tip1" @blur="set1()"
                                               placeholder="请输入手机号码"/></div>
                <div class="form2">用户密码：<input name="password" id="ps1" type="password" @focus="tip2()" @blur="set2()"
                                               placeholder="请输入密码"/></div>
                <div class="form2">确认密码：<input name="password2" id="ps2" type="password" @focus="tip3()"
                                               @blur="set3" placeholder="请确认密码"/></div>
                <div class="form2">用户姓名：<input id="name" name="name" type="text" @focus="tip4()" @blur="set4()"
                                               placeholder="请输入姓名"/></div>
                <div class="form2">身份证号：<input name="idNumber" id="idNumber" type="text" @focus="tip5()"
                                               @blur="set5()" placeholder="请输入身份证号"/></div>

                <br>
                <button type="button" id="bt1" @click="message">注册</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="bt2" type="button" @click="back()">返回</button>
            </form>


        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        created() {

        },
        methods: {

            async message() {

                var phone = document.getElementById("account").value;
                var pass1 = document.getElementById("ps1").value;
                var pass2 = document.getElementById("ps2").value;
                var name = document.getElementById("name").value;
                var id = document.getElementById("idNumber").value;

                if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(phone))) {
                    return this.$message.error('请输入正确的手机号！')
                } else if (pass1 != pass2) {
                    return this.$message.error('两次密码不一致，请检查!')
                } else if ((pass1.length < 8) || !(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(pass1))) {
                    return this.$message.error('密码强度不够，请检查!')
                } else if (name.length < 1) {
                    return this.$message.error('姓名不能为空，请检查!')
                } else if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(id))) {
                    return this.$message.error('无效的身份证号，请检查!')
                } else {
                    const password = this.$md5(pass1).toUpperCase();
                    const {data: res} = await this.$http.post('/user/create', {
                        userName: name,
                        userPhone: phone,
                        userPwd: password,
                        userCard: id,
                        userRole:"user",
                        userPerms:"normal"
                    })
                    console.log(res)
                    if (res.status !== 200) {
                        return this.$message.error(res.msg)
                    }
                    await this.$router.push('/login')
                    return this.$message.success('注册成功!')
                }
            },


            tip1() {

                document.getElementById("account").setAttribute("placeholder", "");
                return this.$message({
                    message:'11位有效号码，用于登录账号',
                    duration:1000
                });
            },

            set1() {
                document.getElementById("account").setAttribute("placeholder", "请输入手机号码");
            },

            tip2() {
                document.getElementById("ps1").setAttribute("placeholder", "");
                return this.$message({
                    message:'不少于8位，由字母和数字组成',
                    duration:1000
                });
            },

            set2() {
                document.getElementById("ps1").setAttribute("placeholder", "请输入密码");
            },

            tip3() {
                document.getElementById("ps2").setAttribute("placeholder", "");
                return this.$message({
                    message:'两次密码保持一致',
                    duration:1000
                });
            },

            set3() {
                document.getElementById("ps2").setAttribute("placeholder", "请确认密码");
            },

            tip4() {
                document.getElementById("name").setAttribute("placeholder", "");
                return this.$message({
                    message:'不能为空',
                    duration:1000
                });
            },

            set4() {
                document.getElementById("name").setAttribute("placeholder", "请输入姓名");
            },
            tip5() {
                document.getElementById("idNumber").setAttribute("placeholder", "");
                return this.$message({
                    message:'有效的身份证号',
                    duration:1000
                });
            },

            set5() {
                document.getElementById("idNumber").setAttribute("placeholder", "请输入身份证号");
            },


            back() {
                this.$router.push('/login')
            }
        }
    }
</script>

<style scoped>
    .background {
        background-image: url("/static/img/background.jpg");
    }

    * {
        margin: auto auto;
        padding: 0;
    }

    body {
        font-size: 20px;
        /*background: url(../img/background.jpg)no-repeat;*/
        /*background-size: 100% 150%;*/
    }

    #web_bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 1000px;
        z-index: -10;
        zoom: 1;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }

    .box2 {
        width: 300px;
        height: 450px;
        text-align: center;
        margin-top: 8%;
        border: 1px solid rgba(0, 0, 0, 0.15);
        background-color: rgba(0, 0, 0, 0.15);
    }

    h1 {
        margin-top: 20px;
        font-size: 30px;
        color: black;
    }

    .box2 .form2 {
        margin-top: 20px;
        color: black;
    }

    .box2 .form3 {
        margin-top: 20px;
        color: black;
        outline: none;

    }

    .box2 .form2 input {
        outline: none;
        text-align: center;
        width: 150px;
        height: 30px;

        font-size: 15px;
        border: 0;
        border-bottom: 1.5px solid #000000;
        background-color: rgba(0, 0, 0, 0)
    }

    .box2 button {
        outline: none;
        margin-left: auto;
        color: #c9c9c9;
        font-size: 20px;
        cursor: pointer;
        width: 70px;
        height: 40px;
        border-radius: 10px;
        border: 0;
        background-image: linear-gradient(to right, #e8198b, #0eb4dd);
        margin-bottom: 20px;
    }

    .box2 button:hover {
        outline: none;
        margin-left: auto;
        color: #F0FFFF;
        width: 70px;
        height: 40px;
        border: 0;
        border-radius: 20px;
        background-image: linear-gradient(to right, #e8198b, #0eb4dd);
        transition: all 0.5s linear;
    }


    .tips {
        margin: 0px 5px 1px 20px;
        text-align: center;
        font-size: 16px;
        color: red;
    }

</style>
